<template>
  <div>
    <div class="rightSidebar">
      <sidebar :data="sidebarData"></sidebar>
    </div>
    <div class="app-container" style="width: 88%">
      <el-form :model="form" :rules="formRules" ref="form" label-width="100px" class="demo-ruleForm">
        <el-row :gutter="24">
          <el-col :span="10" :offset="1">
            <el-form-item label="单元名称" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10" >
            <el-form-item label="数据源" prop="dbValue">
              <el-select v-model="form.dbValue" default-first-option placeholder="请选择数据源" class="w100">
                <el-option v-for="item in allDb" :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="10" :offset="1">
            <el-form-item label="表名" prop="tableName">
              <el-autocomplete
                prefix-icon="el-icon-search"
                class="inline-input w100 "
                v-model="form.tableName"
                :fetch-suggestions="tableQuerySearch"
                placeholder="请输入内容"
                @select="handleTableNameSelect"
              ></el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="10" >
            <el-form-item label="实体名称" prop="entityName">
              <el-input v-model="form.entityName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="1">
            <el-form-item label="所属菜单" prop="menuWhich">
              <el-select v-model="form.menuWhich" filterable default-first-option :filter-method="parentUnitFilter" class="w100" placeholder="请选择">
                <el-option
                  v-for="item in allMenu"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="父单元" prop="parentUnit">
              <el-select v-model="form.parentUnit" filterable default-first-option :filter-method="parentUnitFilter" class="w100" placeholder="请选择">
                <el-option
                  v-for="item in allUnit"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                  <span style="float: left">{{ item.label }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="20" :offset="1">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" autosize placeholder="请输入内容" v-model="form.remark">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="基本属性" label-width="12%">
          <el-checkbox-group v-model="form.baseAttr" class="el-checkbox-group">
            <el-checkbox label="id" name="id" disabled class="el-checkbox"></el-checkbox>
            <el-checkbox label="name" name="name" disabled class="el-checkbox"></el-checkbox>
            <el-checkbox label="create_time" name="create_time" disabled></el-checkbox>
            <el-checkbox label="update_time" name="update_time" disabled></el-checkbox>
            <el-checkbox label="remark" name="remark" disabled></el-checkbox>
            <el-checkbox label="delete" name="delete"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="其他属性" label-width="12%">
          <el-checkbox-group v-model="form.otherAttr" class="el-checkbox-group">
            <el-checkbox label="自定义排序" name="order_index"></el-checkbox>
            <el-checkbox label="操作日志" name="logger"></el-checkbox>
            <el-checkbox label="乐观锁" name="optimistic"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import sidebar from '@/components/SimpleSidebar'

  export default {
    components: {
      sidebar
    },
    name: 'UnitEdit',
    data() {
      return {
        form: { name: '',
          dbValue: '',
          tableName: '',
          parentUnit: '',
          menuWhich: '',
          baseAttr: ['id', 'name', 'entityName', 'create_time', 'update_time', 'remark'],
          otherAttr: ['']
        },
        formRules: {},
        allTableName: [],
        allDb: [{
          label: 'iadmin',
          value: 'iadmin'
        }],
        allUnit: [{
          value: 'Chengdu',
          label: '成都'
        }, {
          value: 'Shanghai',
          label: '上海'
        }, {
          value: 'Beijing',
          label: '北京'
        }, {
          value: 'Shenzhen',
          label: '深圳'
        }, {
          value: 'Guangzhou',
          label: '广州'
        }, {
          value: 'Dalian',
          label: '大连'
        }],
        allUnitBak: [],
        allMenu: [],
        sidebarData: [{ 'path': '/systen/manage/unit', 'index': 'unit', 'name': '单元属性', 'icon': '' }]
      }
    },
    methods: {
      tableQuerySearch(queryString, callback) {
        const tables = this.allTableName
        var results = queryString ? tables.filter(this.createFilter(queryString)) : tables
        // 调用 callback 返回建议列表的数据
        callback(results)
      },
      handleTableNameSelect(item) {
        console.log(item)
      },
      parentUnitFilter(queryString) {
        // 自定义多重过滤选项
        if (queryString) {
          this.allUnit = this.allUnitBak.filter((item) => {
            return (item.label.toLowerCase().indexOf(queryString.toLowerCase())) === 0 || (item.value.toLowerCase().indexOf(queryString.toLowerCase())) === 0
          })
          // 该写法用于含有历史纪录分组的情况下
          // var options = this.allUnitBak[1].options.filter((item) => {
          //   return (item.label.toLowerCase().indexOf(queryString.toLowerCase())) === 0 || (item.value.toLowerCase().indexOf(queryString.toLowerCase())) === 0
          // })
          // // 如果查询不到结果需要置空处理
          // this.allUnit = options.length < 1 ? [] : [{
          //   label: this.allUnitBak[1].label,
          //   options: options
          // }]
        } else {
          this.allUnit = this.allUnitBak
        }
      },
      createFilter(queryString) {
        return (tables) => {
          return (tables.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
        }
      },
      loadAll() {
        console.log('loadAll')
        return [{ 'value': 'aaa' }, { 'value': 'bbb' }]
      }
    },
    mounted() {
      console.log('=======================')
      this.allUnitBak = [].concat(this.allUnit)
      this.allTableName = this.loadAll()
    }
  }
</script>
<style scoped>
  .rightSidebar{
    width: 10%;
    height: 93%;
    position: absolute;
    right: 0px;
  }
  .w100{
    width: 100%;
  }
  .el-checkbox-group{
    width: 90%;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .el-checkbox{
    float: left;
    width: 50%;
    padding-right: 20px;
    margin: 0;
    padding: 0;
  }
  .el-form-item__label{
    width: 80px;
  }
  .el-form-item__content{
    margin-left: 80px;
  }
</style>
